<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</head>
<style>
    .box {
        width: 1000px;
        margin: 20px auto;
        height: 1000px;
        /* background-color: rgba(201, 201, 201, 0.589); */
    }
</style>

<body>
    <div id="app-4" class="box">
      <div class="page-header">
        <h1>Node.js代码生成器 <small>Edit for Zlearn</small></h1>
      </div>
        <div style="margin-bottom: 20px;" class="col-lg-5">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">请输入函数名</span>
              <input type="text" v-model="name" class="form-control" aria-label="...">
            </div><!-- /input-group -->
          </div>
        <div style="margin-bottom: 20px;" class="col-lg-5">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">请添加变量</span>
              <input type="text" v-model="variable" class="form-control" aria-label="...">
            </div><!-- /input-group -->
          </div>
          <div class="col-lg-2">
            <button type="button" @click="addVar" class="btn btn-info">添加</button>
            <button type="button" @click="deleteVar" class="btn btn-danger">删除</button>
          </div>
         
          <div  class="col-lg-offset-5 col-lg-6">
            <span v-for="item in variableList" style="margin-right: 10px;" class="label label-default">{{item}}</span>
          </div>
          <div style="margin-top: 10px;" class="col-lg-4">
            <div v-for="item in type" class="btn-group" role="group" aria-label="...">
                <button @click="addType(item)" type="button" style="margin-right: 10px;" class="btn btn-default">{{item}}</button>
                
              </div>
              
        </div>
        <div style="margin-top: 20px;" style="margin-top: 30px;" class="col-lg-2">
           当前状态： <span :style="{
            color: typeActive=='未选择'?'#000':'blue'
          }">{{typeActive}}</span>
        </div>
          <div class="col-lg-9">
        <div style="margin-top: 20px;" class="input-group">
            <span class="input-group-addon" id="basic-addon1">请输入sql语句</span>
            <input type="text" class="form-control" v-model="sql" placeholder="sql" aria-describedby="basic-addon1">
          </div>
        </div>

        <div class="col-lg-3">
            <button  style="margin-top: 20px;" type="button" @click="submit" class="btn btn-success">生成</button>
            <button  style="margin-top: 20px;" type="button" @click="deleteAll" class="btn btn-success">全局清空</button>
        </div>
        
        <div style="margin-top: 22px;" class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">router</div>
                <div v-html="router" class="panel-body">
                  
                </div>
              </div>
        </div>
        <div style="margin-top: 22px;" class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">services</div>
                <div v-html="services" class="panel-body">
                  
                </div>
              </div>
        </div>
        <div style="margin-top: 22px;" class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">dataFor{{this.name}}</div>
                <div  class="panel-body">
                    <div v-for="item in this.variableList">
                        <div>body('{{item}}').isString(),</div>
                        <!-- body('user_id') -->
                    </div>
                </div>
              </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app4 = new Vue({
  el: '#app-4',
  data: {
    variableList:[],
    variable:'',
    sql:'',
    services:'',
    router:'',
    type:[
        '增加','删除','查询','修改'
    ],
    typeActive:"未选择",
    display:'none',
    name:""
  },
  methods:{
      addVar(){
          if(this.variable.length!=0){
            this.variableList.push(this.variable)
          }
          this.variable = ''
      },
      deleteVar(){
        this.variableList.pop()
      },
      addType(item){
       this.typeActive = item
       if(this.typeActive=='增加'){
            this.sql = 'insert '
       }else if(this.typeActive=='删除'){
            this.sql = "delete "
       }else if(this.typeActive=='查询'){
            this.sql = 'select '
       }else if(this.typeActive=='修改'){
            this.sql = 'update '
       }
      },
      deleteAll(){
        this.typeActive = '未选择'
        this.variableList = []
        this.services = ''
        this.router = ''
        this.sql = ''
        this.name = ''
        this.variable = ''
      },
      submit(){
        // this.services=''
        var BL=''
        for(var i=0; i<this.variableList.length; i++){
            BL = this.variableList[i]+','+BL 
        }
        BL = BL.slice(0,BL.length-1)
        console.log(BL);
        this.services = "<p>function "+this.name+" (req, res, next) {</p><p> let {"+BL+" } = req.body</p><p> const query = <code>`"+this.sql+"`</code></p><p> console.log(query)</p><p> querySql(query).then(data =&gt; {</p><p>  console.log(data)</p><p>  if (!data) {</p><p>   res.json({</p><p>    code: CODE_ERROR,</p><p>    msg: &#39;"+this.typeActive+"失败&#39;,</p><p>    data: null</p><p>   })</p><p>  } else {</p><p>   res.json({</p><p>    code: CODE_SUCCESS,</p><p>    msg: &#39;"+this.typeActive+"成功&#39;,</p><p>    data: data</p><p>   })</p><p>  }</p><p> })</p><p>}</p>"
        this.router = "router.post('/"+this.name+"', dataFor"+this.name+", infoService."+this.name+")"
    }
  }
})
</script>